<template>
  <view class="result-container" :class="riskLevelClass">
    <!-- 风险等级 -->
    <view class="card risk-card">
      <text class="card-title">风险等级</text>
      <text class="risk-level">{{ result.risk_level }}</text>
    </view>

    <!-- 总得分 -->
    <view class="card score-card">
      <text class="card-title">总得分</text>
      <text class="total-score">{{ result.total_score }}</text>
    </view>
	
	<!-- ai分析结果 -->
	<view class="card">
		  <text class="card-title">ai分析结果</text>
		  <text class="ai-estimation">{{result.ai_estimation}}</text>
	</view>
	
    <!-- 记录时间 -->
    <view class="card">
      <text class="card-title">记录时间</text>
      <text class="record-time">{{ formattedDate }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ["result"],
  computed: {
    riskLevelClass() {
      switch (this.result.risk_level) {
        case "不孤独": return "no-isolation";
        case "低度孤独": return "low-isolation";
        case "一般偏下孤独": return "lower-mid-isolation";
        case "一般孤独": return "mid-isolation";
        case "一般偏上孤独": return "upper-mid-isolation";
        case "高度孤独": return "high-isolation";
        default: return "";
      }
    },
    // 格式化 created_at 日期
    formattedDate() {
      if (!this.result.created_at) return "无数据";
      const date = new Date(this.result.created_at);
      return date.toLocaleString(); // 转换为本地时间格式
    }
  },
  methods: {
    
  }
};
</script>

<style scoped>
/* 容器 */
.result-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

/* 风险等级颜色 */
.no-isolation {
  border-left-color: #2ecc71;
}
.low-isolation {
  border-left-color: #27ae60;
}
.lower-mid-isolation {
  border-left-color: #f1c40f;
}
.mid-isolation {
  border-left-color: #e67e22;
}
.upper-mid-isolation {
  border-left-color: #d35400;
}
.high-isolation {
  border-left-color: #c0392b;
}

/* 记录时间样式 */
.record-time {
  font-size: 14px;
  color: #555;
  margin-top: 5px;
}
</style>
